<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">
</head>
<body><header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="index.html" rel="home"><img src="images/logo.png" alt="Logo"></a></h1>
    </div><!-- .site-branding -->

    <div class="hamburger-menu">
        <div class="menu-icon">
            <img src="images/menu-icon.png" alt="menu icon">
        </div><!-- .menu-icon -->

        <div class="menu-close-icon">
            <img src="images/x.png" alt="menu close icon">
        </div><!-- .menu-close-icon -->
    </div><!-- .hamburger-menu -->
</header><!-- .site-header -->

<nav class="site-navigation flex flex-column justify-content-between">
    <div class="site-branding d-none d-lg-block ">
        <h1 class="site-title"><a href="index.html" rel="home"><img src="images/logo2.png" alt="Logo"></a></h1>
    </div><!-- .site-branding -->

    <ul class="main-menu flex flex-column justify-content-center">
        <li class="current-menu-item"><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

    <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>


    <div class="social-profiles">
        <ul class="flex justify-content-start justify-content-lg-center align-items-center">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
        </ul>
    </div><!-- .social-profiles -->
</nav><!-- .site-navigation -->

<div class="nav-bar-sep d-lg-none"></div>

<div class="outer-container">
    <div class="container single-portfolio">
        <div class="row">
            <div class="col-12">
                <div class="featured-img">
                    <figure>
                        <img src="images/single-portfolio.png" alt="">
                    </figure>
                </div><!-- .content-area -->
            </div><!-- .col-12 -->

            <div class="col-12 col-lg-8">
                <div class="content-area">
                    <header class="entry-header">
                        <h1>Black & Colors</h1>
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <p>Get the latest fashion tips and outfit ideas from your favorite celebrities and designers. Click through runway and front row photos from fashion week shows in New York, London, Paris, and Milan. Plus: browse key accessories like bags, shoes, and sunglasses, must-have denim </p>
                    </div><!-- .entry-content -->

                    <div class="post-share flex align-items-center">
                        <label>share:</label>

                        <ul class="flex align-items-center">
                            <li class="fb"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="gp"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li class="in"><a href="#"><i class="fa fa-instagram"></i></a></li>
                            <li class="tw"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        </ul>
                    </div><!-- .post-share -->
                </div><!-- .content-area -->
            </div><!-- .col-12 -->

            <aside class="col-12 col-lg-3 offset-lg-1">
                <div class="entry-meta">
                    <div class="posted-date">
                        <label>Date</label>

                        <span class="date-format"><a href="#">December 20, 2018</a></span>
                    </div><!-- .posted-date -->

                    <div class="post-category">
                        <label>Category</label>
                        <span><a href="#">Photography</a></span>
                    </div><!-- .post-category -->

                    <div class="posted-tags">
                        <label>tags</label>
                        <span><a href="#">Photography</a>, <a href="#">nature</a>, <a href="#">hat</a> </span>
                    </div><!-- .entry-meta -->
                </div><!-- .entry-meta -->
            </aside><!-- .col-md-3 -->
        </div><!-- .row -->

        <div class="row">
            <div class="col">
                <nav class="post-nav">
                    <ul class="flex justify-content-between align-items-center">
                        <li><a href="#"><img src="images/angle-left.png" alt="Previous"></a></li>
                        <li><a href="#"><img src="images/portfolio-icon.png" alt="Back to Portfolio"></a></li>
                        <li><a href="#"><img src="images/angle-right.png" alt="Next"></a></li>
                    </ul>
                </nav><!-- .post-nav -->
            </div><!-- .col -->
        </div><!-- .row -->
    </div><!-- .container -->
</div><!-- .outer-container -->

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/custom.js'></script>

</body>
</html>